@use 'sass:color';

$bright-red: #e74c3c;
$bright-yellow: #f1c40f;
$status-info: #b1b8ba;
$status-error: $bright-red;
$status-warn: $bright-yellow;

.script-asset-inspector-container,
.script-asset-inspector-error-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #293538;
    margin: 6px;
}

.script-asset-inspector-attribute-error-container {
    display: flex;
    flex-direction: column;
    border: none;
    margin: 0;
    background-color: #2c393c;
    
}

.pcui-label {
    &.clickable-error {
        cursor: pointer;
        font-size: 11px;
        
        &:hover {
            text-decoration: underline;
        }
    }
    
    &.pcui-error { // For simple errors
        font-size: 11px;
    }
}

.script-asset-inspector-script.pcui-error.clickable-error {
    cursor: pointer;
    
    &:hover {
        text-decoration: underline;
    }
}

.script-asset-inspector-attribute-error-title, .script-asset-inspector-attribute-warning-title {
    font-family: inconsolatamedium, Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
}

.script-asset-inspector-attribute-error-title:hover, .script-asset-inspector-attribute-warning-title:hover {
    text-decoration: underline;
}

.script-asset-inspector-error-container > .pcui-label {
    white-space: normal;
}

.script-asset-inspector-container.pcui-hidden,
.script-asset-inspector-error-container.pcui-hidden {
    display: none;
}

.script-asset-inspector-script {
    flex-grow: 1;
    color: #fff;
    font-size: 12px;
    font-family: 'Proxima Nova Bold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    background-color: #2c393c;
    padding: 6px;
    margin: 0;
    white-space: normal;
}


.script-asset-inspector-attribute {
    flex-grow: 1;
    color: #b1b8ba;
    font-size: 12px;
    font-family: 'Proxima Nova Regular', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 26px;
    padding: 0 6px;
    margin: 0;
}

.script-asset-inspector-attribute:hover {
    background-color: #313e41;
}

.script-asset-inspector-warning {
    color: $status-warn;
}

.script-asset-inspector-attribute-warning {
    color: $status-warn;
    
    .pcui-label {
        color: $status-warn;
    }
}

.script-asset-inspector-attribute-warning.clickable-warning {
    cursor: pointer;
    
    &:hover {
        text-decoration: underline;
    }
}

.script-asset-inspector-attribute-error {
    &::before {
        @extend .font-icon;

        content: '\E368';
        margin-right: 6px;
    }
}

// Tooltip warnings styling
.warnings-title.script-asset-inspector-warning {
    // Normal text color for the header
}

.warning-item.script-asset-inspector-warning {
    color: var(--pcui-warning-color);
    font-size: 11px;
}

.open-console {
    text-decoration: underline;
    cursor: pointer;
}